<template>
    <div class="box">
        <div class="boxtop"> 
           <img @click="$router.go(-1)" src="img/tx/back.png" alt="">
           <p>欢迎来到烘焙课堂</p>
        </div>

        <div class="content" >
           <div class="left" >
               <ul v-for="(v,i) in items" :key="i">
                   <li @click="act(i)" :class="[i==active?'active':'']">{{v.name}}</li>
               </ul>
           </div>
           <div class="right" v-if="!active||active">
                <div v-for="(v,i) in allname" :key="i" class="perfood" @click="spfllist(v.name)">
                    <img :src="v.image" alt="">
                    <p>{{v.name}}</p>
                </div>
            </div>
           <div class="right" v-else>
                <p>正在加载...</p>
            </div>
        </div>

 
    </div>
</template>
<script>

export default {
   
     data() {
        return {
        active:0,
        arr:[],
        items:[],
        lists:[],
        allname:[]
        }
       
  },
  methods:{
       splf:function(){
            this.axios({
                url:"https://api.hongbeibang.com/classify/get?_t=1585383953633&csrfToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOjAsImV4cCI6MTc3MTU2NjMxNCwiaWF0IjoxNTgyMTc3NTE0fQ.iBmGtQ0fasTTaSuApywmN6Ms0aNYwUvkGLoXX6V6hO8",
                method:"get",
            }).then((ok)=>{
                 this.arr=ok.data.data
                 this.items=this.arr.classify
                
                this.lists=this.items[0].list
                this.allname=this.lists[0].list
                //window.console.log(this.arr)
                //window.console.log(this.items)
            })
        },
        act(e){
            //window.console.log(e)
            this.active=e
             this.axios({
                url:"https://api.hongbeibang.com/classify/get?_t=1585383953633&csrfToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOjAsImV4cCI6MTc3MTU2NjMxNCwiaWF0IjoxNTgyMTc3NTE0fQ.iBmGtQ0fasTTaSuApywmN6Ms0aNYwUvkGLoXX6V6hO8",
                method:"get",
            }).then(()=>{
                this.lists=this.items[e].list
                this.allname=this.lists[0].list
                 //window.console.log(this.allname)
            })
        },
        spfllist(e){
            this.$router.push({
               path:"/spfllist",
               query:{
                   keyword:e
               }
            })
        }
  },
  created(){
      this.splf()
     // this.act1()
  }
}
</script>
<style  scoped>
    .box{width: 90%;margin: .2rem auto;overflow: hidden}
    .boxtop{display: flex;}
    .boxtop p{position:relative;left:1.38rem;font-size: 25px;color: #DD5498;}
    .content{width: 100%;display: flex;justify-content:space-between;margin-top: .1rem}
    .active{font-weight: bold;color: #fff;background-color: #DD5498}
    .left{background-color: #F5F7F9}
    .left ul li{border-top: .02rem solid #FBE2ED;padding: .07rem;margin: 0.05rem 0;width: .8rem}
    .right{height: 100%;display: flex;flex-wrap: wrap}
    .right img{width: .58rem; border-radius: 4px;}
    .right p{text-align: center;}
    .perfood{margin:.1rem}
</style>